<template>
  <div class="container">
    <div class="row clearfix">
    <div id="up_image">
        <el-form action="" method="post" enctype="multipart/form-data">
        <br />
        <p>
            问题名称: <el-input v-model="input" placeholder="Please input" />
        </p>
        <el-button type="primary" @click="Question">提交</el-button>
        <br />
        <div>问题答案:</div>
        <!-- <textarea v-model="answer" style="width: 1200px" readonly rows="10" cols="50" ></textarea> -->
        <textarea
            v-model="chatAnswer"
            readonly
            rows="10"
            cols="50"
            oninput="this.style.height = '';this.style.height = this.scrollHeight + 'px';"
        ></textarea>

        <br />
        </el-form>
    </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { ref } from "vue";
import { chat, MyData } from "../http";

const input = ref("");
const chatAnswer = ref("");
const Question = async () => {
let res = (await chat({ ask: input.value })).data;
    // console.log(res);s
    const data = res as MyData;
    // console.log("data", res, "data.answer", data.answer);
    // 增加一个stream
    chatAnswer.value = data.answer;
};
</script>

<style class="sass">
    textarea {
    resize: none;
    width: 100%;
    border: solid black 1px;
}
</style>
